﻿<MContainer Fluid>
    <MRow>
        <MCol Cols="12">
            <MSubheader Class="pl-0">
                Show thumb when using _slider
            </MSubheader>
            <MSlider @bind-Value="_slider"
                     ThumbLabel="true"></MSlider>
        </MCol>

        <MCol Cols="12">
            <MSubheader Class="pl-0">
                Always show thumb label
            </MSubheader>
            <MSlider @bind-Value="_slider"
                     ThumbLabel="@("always")"></MSlider>
        </MCol>

        <MCol Cols="12">
            <MSubheader Class="pl-0">
                Custom thumb size
            </MSubheader>
            <MSlider @bind-Value="_slider"
                     ThumbSize="24"
                     ThumbLabel="@("always")"></MSlider>
        </MCol>

        <MCol Cols="12">
            <MSubheader Class="pl-0">
                Custom thumb label
            </MSubheader>
            <MSlider @bind-Value="_slider"
                     ThumbSize="24"
                     ThumbLabel="@("always")">
                <ThumbLabelContent Context="value">
                    @_satisfactionEmojis[Convert.ToInt32(Math.Min(Math.Floor(value / 10), 9D))]
                </ThumbLabelContent>
            </MSlider>
        </MCol>
    </MRow>
</MContainer>

  @code {
    private double _slider = 45;
    private List<string> _satisfactionEmojis = new List<string>
    {
        "😭", "😢", "☹️", "🙁", "😐", "🙂", "😊", "😁", "😄", "😍"
    };
  }